import { motion } from 'framer-motion';
import { HomeOutlined, CameraOutlined, UserOutlined } from '@ant-design/icons';

interface BottomNavProps {
  currentPage: 'home' | 'camera' | 'profile';
  onPageChange: (page: 'home' | 'camera' | 'profile') => void;
}

export const BottomNav = ({ currentPage, onPageChange }: BottomNavProps) => {
  const navItems = [
    { id: 'home', icon: HomeOutlined, label: '首页' },
    { id: 'camera', icon: CameraOutlined, label: '拍照' },
    { id: 'profile', icon: UserOutlined, label: '我的' }
  ] as const;

  return (
    <div className="fixed bottom-0 left-0 right-0 z-50">
      {/* 背景模糊效果 */}
      <div className="absolute inset-0 bg-white/80 backdrop-blur-xl border-t border-gray-200/50"></div>
      
      {/* 导航按钮容器 */}
      <div className="relative flex justify-center items-center px-2 py-1.5">
        <div className="flex justify-between items-center w-[280px]">
          {navItems.map(({ id, icon: Icon, label }) => {
            const isActive = currentPage === id;
            return (
              <motion.button
                key={id}
                whileHover={{ scale: 1.02 }}
                whileTap={{ scale: 0.98 }}
                onClick={() => onPageChange(id)}
                className="flex flex-col items-center justify-center w-20"
              >
                {/* 图标容器 */}
                <div className={`relative w-10 h-10 flex items-center justify-center mb-1 transition-all duration-300 ${
                  isActive 
                    ? 'text-blue-500' 
                    : 'text-gray-500'
                }`}>
                  <Icon className="text-xl" />
                  
                  {/* 活动指示器 */}
                  {isActive && (
                    <motion.div
                      layoutId="activeIndicator"
                      className="absolute -bottom-0.5 left-1/2 transform -translate-x-1/2 w-1 h-1 rounded-full bg-blue-500"
                      transition={{ type: "spring", stiffness: 500, damping: 30 }}
                    />
                  )}
                </div>
                
                {/* 文字标签 */}
                <span className={`text-[10px] font-medium transition-colors duration-300 whitespace-nowrap ${
                  isActive ? 'text-blue-500' : 'text-gray-500'
                }`}>
                  {label}
                </span>
              </motion.button>
            );
          })}
        </div>
      </div>

      {/* 底部安全区域 */}
      <div className="h-[var(--safe-area-inset-bottom)] bg-white/80 backdrop-blur-xl"></div>
    </div>
  );
}; 